<template>
    <view class="cash-wrapper">
        <view class="price-box">
            <view class="tips">我的余额</view>
            <view class="price"> <text class="unit">￥</text>{{walletInfo.balance}}</view>
        </view>

        <view class="card-form">
            <view class="card-title">提现金额</view>
            <input class="card-input" v-model="withDraw.money" type="text" placeholder="请填写发起金额" placeholder-style="color:#CFCFCF;">

            <view class="tips">当前可提现余额 <text class="price">{{walletInfo.balance}}</text> 元，<text class="price" @click="price = walletInfo.balance">全部提现</text> </view>
        </view>

        <view class="card-form" style="height: 280rpx;">
            <view class="card-title">添加银行卡</view>
            <input class="card-input" v-model="withDraw.bankName" type="text" placeholder="请输入银行名称" placeholder-style="color:#CFCFCF;">

            <input class="card-input"  v-model="withDraw.bankCardNum" type="text" placeholder="请输入银行卡号" placeholder-style="color:#CFCFCF;">
        </view>
        <view class="btn" style="margin-top: 56rpx;">
            <Button @click="toDraw">继续</Button>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, onUnmounted } from 'vue';
import Button from '@/components/Button.vue'
import api from '@/apis/api';
import {useRouter,useRoute} from 'vue-router'



const walletInfo = reactive({
  balance: null,
  recordList: []
})

const withDraw = reactive({
  bankCardNum: null,
  bankName: [],
  money: null,
})
function getWalletInfo() {
  return api.myWallet().then(({ data }) => {
    console.log(data,"data====")
    walletInfo.balance = data.balance
    walletInfo.recordList=data.recordList
    console.log(walletInfo.recordList ,"walletInfo.recordList")
  })
}

function applyWithDraw() {
  return api.applyWithDraw().then(({ data }) => {
    console.log(data,"data====")
    console.log(walletInfo.recordList ,"walletInfo.recordList")
  })
}
let price = ref()

const B = reactive({})
function begin(){
    uni.navigateTo({
        url:'/pages/user/cash/apply?',
      data: withDraw
    })
}

// 跳转到详情的页面
const router = useRouter()
const toDraw = ()=>{
  router.push({
    path:'/pages/user/cash/apply',
    query: withDraw
    // 多个参数这样的写法
    // query:{Shuju}
  })
}

onMounted(() => {
  getWalletInfo()

})

onUnmounted(() => {

})

</script>

<style lang="scss" scoped>
page{
    background: #f9f9f9;
}
.cash-wrapper{
    padding: 0 30rpx;
    padding-top: 40rpx;
    font-family: PingFang SC Bold;

    .price-box{
        height: 300rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background: url('../../../assets/images/sys_qianbao_card.png') no-repeat;
		background-size: 100% 100%;
        border-radius: 32rpx;
        // box-shadow: 0px 12rpx 12rpx 24rpx rgba(254, 112, 12, 0.07);
		box-shadow: 0rpx 6rpx 6rpx 12rpx rgba(254, 112, 12, 0.07);
        font-family: PingFang SC Bold;
        display: flex;
    justify-content: center;
    flex-direction: column;
    // text-align: center;
        .price{
            font-size: 60rpx;
            color: #fff;
				font-weight: 800;
            .unit{
                font-size: 46rpx;
				font-weight: 400;
            }
        }
        .tips{
            font-size: 30rpx;
            color: #FFECEC;
        }
    }

    .card-form{
        background: #fff;
        border-radius: 30rpx;
        height: 230rpx;
        padding: 0 30rpx;
        margin-top: 48rpx;
        padding-top: 48rpx;
        .card-input{
            text-indent: 24rpx;
            font-size: 24rpx;
            border-radius: 16rpx;
            background: #F9F9F9;
            height: 80rpx;
            margin-top: 26rpx;
        }
        .card-title{
            color: #333333;
            font-size: 28rpx;
        }
        .tips{
            color: #979797;
            font-size: 28rpx;
            margin-top: 26rpx;
            .price{
                color: #ff0000;
            }
        }
    }
}
</style>
